<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../bower_components/colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../bower_components/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>ThumnailPath custom function</h1>
    <p>Tests the thumbnailPath custom function used to determine the correct thumbnail to be used for 
    a specific size. In this example we use always a different thumbnail</p>
    <div id="thumnailPathTest" style="background-color: red;">
        <div>
            <img alt="Just in a dream Place" src="../photos/7948632554_01f6ae6b6f_m.jpg" />
        </div>
        <div>
            <img alt="Truthful Innocence" src="../photos/7302459122_19fa1d8223_m.jpg" />
        </div>
        <div>
            <img alt="Simply my Brother" src="../photos/7222046648_5bf70e893a_m.jpg" />
        </div>
        <div>
            <img alt="Freedom" src="../photos/7002395006_29fdc85f7a_m.jpg" />
        </div>
        <div>
            <img alt="Maybe spring" src="../photos/7062575651_b23918b11a_m.jpg" />
        </div>
        <div>
            <img alt="Love" src="../photos/6841267340_855273fd7e_m.jpg" />
        </div>
        <div>
            <img alt="Young Lovers' Wall and the Old Rain" src="../photos/6958456697_e56a37bb5f_m.jpg" />
        </div>
        <div>
            <img alt="This is the colors I love" src="../photos/6791628438_affaa19e10_m.jpg" />
        </div>
        <div>
            <img alt="The Hope" src="../photos/6916180091_9c9559e463_m.jpg" />
        </div>
        <div>
            <img alt="Florence streets. Florence people." src="../photos/6880502467_d4b3c4b2a8_m.jpg" />
        </div>
        <div>
            <img alt="I Love You" src="../photos/6876412479_6268c6e2aa_m.jpg" />
        </div>
        <div>
            <img alt="The painter in Florence" src="../photos/6840627709_92ed52fb41_m.jpg" />
        </div>
        <div>
            <img alt="Me and My Belover" src="../photos/6812090617_5fd5bbdda0_m.jpg" />
        </div>
        <div>
            <img alt="Fiocco" src="../photos/6806687375_07d2b7a1f9_m.jpg" />
        </div>
        <div>
            <img alt="My first clothespin" src="../photos/6798453217_72dea2d06e_m.jpg" />
        </div>
    </div>
    
    <!-- bower:js -->
    <script src="../../bower_components/jquery/dist/jquery.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
    $("#thumnailPathTest").justifiedGallery({
        rowHeight: 200,
        thumbnailPath: function (currentPath, width, height) {
            var replaceStr = "$1$2$3";
            if (Math.max(width, height) < 100) {
                replaceStr = "$1_t$3";
            } else if (Math.max(width, height) < 240) { 
                replaceStr = "$1_m$3";
            } else {
                replaceStr = "$1_b$3";
            }
            return currentPath.replace(/(.*)(_[a-z])(\..*)/, replaceStr);
        }
    });
    </script>
</body>

</html>
